<template>
	<view style="user-select: text;">
		<sunMenu></sunMenu>
		<view class="reward-title-title">
			<view class="reward-title">獎勵機制</view>
			<view v-for="li in list" class="reward-table">
				<view class="table-title">{{`${li.name+'('+li.distance}`}}K)</view> 
				<table>
					<thead>
						<tr>
							<th>總名次</th>
							<th>男子組</th>
							<th>女子組</th>
						</tr>
					</thead>
					<tbody>
						<tr v-if="li.one">
							<td>第一名</td>
							<td>{{li.one}}</td>
							<td>{{li.one}}</td>
						</tr>
						<tr v-if="li.two">
							<td>第二名</td>
							<td>{{li.two}}</td>
							<td>{{li.two}}</td>
						</tr>
						<tr v-if="li.three">
							<td>第三名</td>
							<td>{{li.three}}</td>
							<td>{{li.three}}</td>
						</tr>
						<tr v-if="li.four">
							<td>第四名</td>
							<td>{{li.four}}</td>
							<td>{{li.four}}</td>
						</tr>
						<tr v-if="li.five">
							<td>第五名</td>
							<td>{{li.five}}</td>
							<td>{{li.five}}</td>
						</tr>
						<tr v-if="li.six">
							<td>第六名</td>
							<td>{{li.six}}</td>
							<td>{{li.six}}</td>
						</tr>
						<tr v-if="li.seven">
							<td>第七名</td>
							<td>{{li.seven}}</td>
							<td>{{li.seven}}</td>
						</tr>
						<tr v-if="li.eight">
							<td>第八名</td>
							<td>{{li.eight}}</td>
							<td>{{li.eight}}</td>
						</tr>
						<tr v-if="li.nine">
							<td>第九名</td>
							<td>{{li.nine}}</td>
							<td>{{li.nine}}</td>
						</tr>
						<tr v-if="li.ten">
							<td>第十名</td>
							<td>{{li.ten}}</td>
							<td>{{li.ten}}</td>
						</tr>
					</tbody>
				</table>
				
				<view class="additional-prize" v-if="li.twenty">
					第十一名至第二十名，獎金{{li.twenty}}元。
				</view>
			</view>
		</view>
		<view style="height: 30px;"></view>
		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>
			 
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	import {
		getCategoriesListAll
	} from '@/api/api.js'
	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				query:{
					activityId: ''
				},
				list:[],
			}
		},
		onLoad(op) { 
			this.getList(op)
		},
		methods: {
			getList(e){
				this.query.activityId = e.activityId
				getCategoriesListAll(this.query).then(res=>{ 
					this.list = res.data
				})
			}
		}
	}
</script>

<style>
	
	
	@media screen and (min-width: 768px) {
		.reward-title-title { 
			padding: 2px 230px 0 230px; 
		}
		
	}
.reward-title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin: 20px 0;
}

.reward-table {
	margin: 20px auto;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	width: 95%;
	max-width: 1600px;
}

.table-title {
	background-color: #f5f5f5;
	padding: 15px;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
}

table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
}

th, td {
	padding: 15px;
	text-align: center;
	border: 1px solid #eee;
}

th {
	background-color: #f8f9fa;
	font-weight: bold;
}

tr:nth-child(even) {
	background-color: #f9f9f9;
}

.additional-prize {
	padding: 15px;
	background-color: #f5f5f5;
	text-align: center;
}

@media screen and (min-width: 768px) {
  .reward-title-title { 
    padding: 2px 230px 0 230px; 
  }
}
</style>
